<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" ,minimum-scale=1.0 ,maximum-scale=1.0 ,user-scalable=1.0>
    <title>Document</title>
    <link rel="stylesheet" href="css/Normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- header的制作 -->
    <header class="header">
        <a href="#" class="fenlei"></a>
        <div class="search">
            <div class="search_box">
                <div class="soushuo"></div>
                <input type="text" placeholder="商品/店铺"> 
            </div>          
        </div>
        <a href="#" class="login"></a>
    </header>
    <!-- header的制作end -->
    <!-- banner的制作start -->
     <a class="banner">
        <img src="img/banner.jpg" alt="banner">
    </a>
    <!-- banner的制作end -->
    <!-- 广告的制作start -->
    <a href="#" class="ad">
        <img src="img/ad.gif" alt="guanggao">
    </a>
    <!-- 广告的制作end -->
    <!-- nav导航栏的制作start -->
    <nav class="nav">
        
        <a href="#">
            <img src="img/nav1.png" alt="">
            <span>苏宁秒杀</span>
        </a>
        <a href="#">
            <img src="img/nav2.png" alt="">
            <span>苏宁超市</span>
        </a>
        <a href="#">
            <img src="img/nav3.png" alt="">
            <span>苏宁拼购</span>
        </a>
        <a href="#">
            <img src="img/nav4.png" alt="">
            <span>手机数码</span>
        </a>
        <a href="#">
            <img src="img/nav5.png" alt="">
            <span>苏宁家电</span>
        </a>
        <a href="#">
            <img src="img/nav6.png" alt="">
            <span>免费水果</span>
        </a>
        <a href="#">
            <img src="img/nav7.png" alt="">
            <span>super会员</span>
        </a>
        <a href="#">
            <img src="img/nav8.png" alt="">
            <span>签到有礼</span>
        </a>
        <a href="#">
            <img src="img/nav9.png" alt="">
            <span>领劵中心</span>
        </a>
        <a href="#">
            <img src="img/nav10.png" alt="">
            <span>更多频道</span>
        </a>
    </nav>
    <!-- nav导航栏的制作end -->
    <!-- 广告栏 -->
    <div class="ad2">
        <a href="#" class="box1"><img src="img/ad2 1.jpg" alt=""></a>
        <a href="#" class="box2"><img src="img/ad2 2.png" alt=""></a>
        <a href="#" class="box3"><img src="img/ad2 3.png" alt=""></a>
    </div>
    <!-- 广告栏end -->
    <!-- floor楼层的搭建start -->
     <div class="floor">
        <div class="floor1">
            <div class="boxl">
                <div class="title">
                    <p>
                        现时秒杀
                    </p>
                </div>
                <p class="renqi">
                    人气好货限时抢
                </p>
                <div class="shangping">
                   <div class="boxl">
                       <img src="img/boxl 1.jpg" alt="">
                       <div class="price">¥6</div>
                   </div>
                   <div class="boxr">
                    <img src="img/boxl 2.jpg" alt="">
                    <div class="price">¥6</div>
                   </div>
                </div>
            </div>
            <div class="fengge">

            </div>
            <div class="boxr">
                <div class="title">
                    <p>
                        现时秒杀
                    </p>
                </div>
                <p class="renqi">
                    人气好货限时抢
                </p>
                <div class="shangping">
                   <div class="boxl">
                       <img src="img/boxl 1.jpg" alt="">
                       <div class="price">¥6</div>
                   </div>
                   <div class="boxr">
                    <img src="img/boxl 2.jpg" alt="">
                    <div class="price">¥6</div>
                   </div>
                </div>
            </div>
        </div>
        <div class="floor2">
            <div class="boxl">
                <div class="title">
                    <p>
                        现时秒杀
                    </p>
                </div>
                <p class="renqi">
                    人气好货限时抢
                </p>
                <div class="shangping">
                   <div class="boxl">
                       <img src="img/boxl 1.jpg" alt="">
                       <div class="price">¥6</div>
                   </div>
                   <div class="boxr">
                    <img src="img/boxl 2.jpg" alt="">
                    <div class="price">¥6</div>
                   </div>
                </div>
            </div>
            <div class="fengge">

            </div>
            <div class="boxr">
                <div class="title">
                    <p>
                        现时秒杀
                    </p>
                </div>
                <p class="renqi">
                    人气好货限时抢
                </p>
                <div class="shangping">
                   <div class="boxl">
                       <img src="img/boxl 1.jpg" alt="">
                       <div class="price">¥6</div>
                   </div>
                   <div class="boxr">
                    <img src="img/boxl 2.jpg" alt="">
                    <div class="price">¥6</div>
                   </div>
                </div>
            </div>
        </div>
        <div class="space_px"></div>
        <!-- 为您推荐栏的制作 -->
           <div class="floor3">
            <div class="left_title">
                <p class="row1">为您推荐</p>
                <p class="row2">精选频道</p>
            </div>
            <div class="fourspace">
                <a href="#">
                    <img src="img/tuijian1.webp" alt="">
                    <span>苏宁国际</span>
                </a>
                <a href="#">
                    <img src="img/tuijian2.webp" alt="">
                    <span>苏宁国际</span>
                </a>
                <a href="#">
                    <img src="img/tuijian3.png" alt="">
                    <span>苏宁国际</span>
                </a>
                <a href="#">
                    <img src="img/tuijian4.png" alt="">
                    <span>苏宁国际</span>
                </a>
            </div>
        </div>
       <a class="bangdan">
            <img src="img/bangdan.png" alt="">
       </a>
       <div class="bangdanbox">
           <a href="#">
               <img src="img/bangdanbox1.webp" alt="">
               <div class="bottom">
                   <p class="title1">逆龄活肤精华榜</p>
                   <p class="title2">卖爆1852件</p>
               </div>
            </a>
            <a href="#">
                <img src="img/bangdanbox1.webp" alt="">
                <div class="bottom">
                    <p class="title1">逆龄活肤精华榜</p>
                    <p class="title2">卖爆1852件</p>
                </div>
             </a>
             <a href="#">
                <img src="img/bangdanbox1.webp" alt="">
                <div class="bottom">
                    <p class="title1">逆龄活肤精华榜</p>
                    <p class="title2">卖爆1852件</p>
                </div>
             </a>
       </div>
       <div class="cainixihuan">
           <img src="img/xihuan.webp" alt="">
       </div>
        <!-- 342 542 -->
         <div class="bigbox">
            <ul>
                <a href="#" title="SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
            </ul>
            <ul>
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
                <a href="#">
                    <img src="img/shangping1.webp" alt="">
                    <p class="title">SHISEIDO 资生堂SENKA珊珂 洗颜专科绵润泡沫洁面乳 120克/支 控油平衡深层清洁各种肤质通用</p>
                    <img src="img/suningzhiying.png" class="suning">
                    <div class="price">￥ 36</div>
                </a> 
            </ul>
        </div>
    </div>
</body>
</html>